<template>
  <div class="Page">
    <el-row>
      <el-col :span="2"
        ><div
          class="grid-content bg-purple"
          style="margin-top: 15px; font-size: x-large; color: rgb(47, 223, 209)"
        >
          聘途
        </div></el-col
      >
      <el-col :span="12" :offset="6"
        ><div class="grid-content bg-purple-light">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            mode="horizontal"
            @select="handleMenuSelect"
          >
            <el-menu-item index="seekerHomePage" style="width: 150px">
              首页</el-menu-item
            >
            <el-menu-item index="seekerRecomPage" style="width: 150px">
              推荐</el-menu-item
            >
            <el-menu-item index="seekerComPage" style="width: 150px">
              公司</el-menu-item
            >
            <el-menu-item index="seekerAppPage" style="width: 150px">
              App</el-menu-item
            >
          </el-menu>
        </div></el-col
      >
      <el-col :span="2" :offset="2"
        ><div class="grid-content bg-purple" style="margin-top: 15px">
          <router-link
            to="/PerRevisePassword"
            style="color: white; font-size: x-large; text-decoration: none"
            >个人中心</router-link
          >
        </div></el-col
      >
    </el-row>
  </div>
</template>
    
    <script>
export default {
  data() {
    return {
      activeIndex: "", // 默认选中的菜单项
    };
  },
  created() {
    // 在组件创建时获取当前路由的名称，并设置为 activeIndex 的初始值
    this.activeIndex = this.$route.name || "seekerHomePage"; // 如果没有路由名称，默认为 "manage"
  },
  methods: {
    handleMenuSelect(index) {
      // 如果当前选中的菜单项已经是目标路由，则不执行重复导航
      if (this.activeIndex === index) {
        return;
      }
      switch (index) {
        case "seekerHomePage":
          this.$router.push({ name: "seekerHomePage" });
          break;
        case "seekerRecomPage":
          this.$router.push({ name: "seekerRecomPage" });
          break;
        case "seekerComPage":
          this.$router.push({ name: "seekerComPage" });
          break;
        case "seekerAppPage":
          this.$router.push({ name: "seekerAppPage" });
          break;
        default:
          break;
      }
    },
  },
};
</script>
    
    <style scoped>
.Page {
  /* 大的div */
  background-color: rgb(32, 35, 41);
  color: white;
  font-size: large;
}
.el-menu-vertical-demo {
  /* 菜单栏 */
  background-color: rgb(32, 35, 41);
  border-bottom: none !important;
}
.el-menu-item {
  /* 菜单栏元素 */
  color: white !important;
  font-size: large;
}
.el-menu-item:hover {
  /* 鼠标悬停 */
  background-color: transparent !important;
}

.el-menu-item.is-active {
  /* 菜单栏元素改变 */
  color: rgb(78, 173, 231) !important;
  border-bottom: none !important;
}
/* 可以根据需要自定义样式 */
</style>